<template>
  <div>
    <el-row>
      <el-col :span="22">
        <div class="sec-title">试题管理</div>
      </el-col>
      <el-col :span="2">
        <div>
          <i class="el-icon-plus sec-blue"></i>
          <el-button @click="saveHandle" type="text">新增</el-button>
        </div>
      </el-col>
    </el-row>
    <!-- 筛选条件 -->
    <el-form
      :inline="true"
      :model="queryParams"
      class="demo-form-inline"
    >
      <el-form-item label="试题描述">
        <el-input
          v-model="queryParams.problemDesc"
          placeholder="试题描述"
        ></el-input>
      </el-form-item>
      <el-form-item label="试题类型">
        <el-select v-model="queryParams.problemType" placeholder="试题类型">
            <el-option v-for="(item, index) in problemTypes" :label="item.codeName" :value="item.codeValue" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="initSearchProblems"
        >查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      ref="tableData"
      :data="problems"
      height="590"
    >
      <el-table-column
        prop="problemId"
        label="试题编号"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="problemDesc"
        label="试题描述"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="problemType"
        label="试题类型"
        width="170"
      >
      <template slot-scope="scope">
        {{ parseProblemType(scope.row)}}
      </template>
      </el-table-column>
      <el-table-column
        prop="analysis"
        label="试题分析"
        width="170"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        width="140"
      >
        <template slot-scope="scope">
          <el-button
            @click="showAnswer(scope.row)"
            type="text"
            size="small"
          >答案</el-button>
          <el-button
            @click="editHandle(scope.row)"
            type="text"
            size="small"
          >修改</el-button>
          <el-button
            @click="deleteHandle(scope.row)"
            type="text"
            size="small"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="current"
      :page-size="pageSize"
      @current-change="currentChangeHandle"
      @pre-click="preHandle"
      @next-click="nextHandle"
    >
    </el-pagination>
    <el-drawer
      :title="isSaveProblem ? '新增试题' : '修改试题'"
      :visible.sync="changeProblemKey">
      <el-form :model="changeProblem" label-width="80px">
        <el-form-item v-if="!isSaveProblem" label="试题编号">
          <el-input v-model="changeProblem.problemId"></el-input>
        </el-form-item>
        <el-form-item label="试题描述">
          <el-input v-model="changeProblem.problemDesc"></el-input>
        </el-form-item>
        <el-form-item label="试题类型">
            <el-select v-model="changeProblem.problemType" placeholder="试题类型">
                <el-option v-for="(item, index) in problemTypes" :label="item.codeName" :value="item.codeValue" :key="index"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item v-if="isSaveAnswer" label="正确答案">
            <el-select v-model="changeProblem.answerSortedId" placeholder="选择正确答案">
                <el-option v-for="(item, index) in answers" :label="item.answer" :value="item.sortedId" :key="index"></el-option>
            </el-select>
            <el-button @click="openChangeAnswerDialog" type="primary" icon="el-icon-plus"></el-button>
        </el-form-item>
        <el-form-item v-if="!isSaveAnswer" label="正确答案">
            <el-select v-model="changeProblem.answerSortedId" placeholder="选择正确答案">
                <el-option v-for="(item, index) in answers" :label="item.answer" :value="item.sortedId" :key="index"></el-option>
            </el-select>
            <el-button @click="openChangeAnswerDialog" type="primary" icon="el-icon-edit"></el-button>
        </el-form-item>
        <el-form-item label="试题分析">
          <el-input v-model="changeProblem.analysis"></el-input>
        </el-form-item>
        <el-form-item label="选择题库">
          <el-input v-model="changeProblem.bankName">
            <el-button @click="selectBankKey = true" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="changeProblemHandle">确定</el-button>
          <el-button @click="changeProblemKey = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <el-dialog
      title="选择题库"
      :visible.sync="selectBankKey"
      width="60%">
      <paper-bank @selectBank="selectBankHandle"></paper-bank>
    </el-dialog>
    <el-dialog
        title="编辑答案"
        :visible.sync="saveAnswerDialog"
        width="60%">
        <!-- <el-form :model="changeAnswer" label-width="80px">
            <el-form-item v-if="!isSaveAnswer" label="答案编号">
                <el-input v-model="changeAnswer.answerId"></el-input>
            </el-form-item>
            <el-form-item label="答案描述">
                <el-input v-model="changeAnswer.answer"></el-input>
            </el-form-item>
            <el-form-item label="是否正确">
              <el-select v-model="changeAnswer.isRight" placeholder="是否正确">
                <el-option v-for="(option, index) in rightOptions" :key="index" :label="option.label" :value="option.value" ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="分值">
                <el-input v-model="changeAnswer.score"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="changeAnswerHandle">确定</el-button>
                <el-button @click="saveAnswerDialog = false">取消</el-button>
            </el-form-item>
        </el-form> -->
        <!-- <problem-answer-detail ref="answerDetail" :currentAnswers="isSaveProblem ? [] : answers"></problem-answer-detail> -->
        <problem-answer-detail ref="answerDetail" @answerChange="answerChangeHandle"></problem-answer-detail>
    </el-dialog>
  </div>
</template>

<script>
import paperBank from '@/components/PaperBank.vue'
import problemAnswerDetail from '@/components/ProblemAnswerDetail.vue'
import { showBankInfo, queryProblemAnswers, getConfig, parseConfig, saveProblem, editProblem, deleteProblem } from '@/api/system/system.js'
export default {
  components: {
    paperBank,
    problemAnswerDetail
  },
  data() {
    return {
      current: 1,
      pageSize: 10,
      total: 0,
      problems: [],
      problemTypes: [],
      rightOptions: [
        {
          label: '正确',
          value: 1
        },
        {
          label: '错误',
          value: 2
        }
      ],
      queryParams: {
        problemDesc: '',
        problemType: '',
        bankId: '',
        current: 1,
        pageSize: 10
      },
      changeProblem: {
        problemId: '',
        problemDesc: '',
        problemType: '',
        problemRight: '',
        analysis: '',
        bankId: '',
        bankName: '',
        answerSortedId: '',
        answers: []
      },
      changeAnswer: {
        answerId: '',
        answer: '',
        sortedId: '',
        isRight: '',
        problemId: '',
        score: ''
      },
      answers: [],
      changeProblemKey: false,
      selectBankKey: false,
      isSaveProblem: false,
      saveAnswerDialog: false,
      isSaveAnswer: false,
      currentBankId: '',
      currentProblemId: 0
    }
  },
  async mounted() {
    const {data: res} = await getConfig({codeType: 'PROBLEM_TYPE', codeValue: ''})
    if (res.code === 200) {
        this.problemTypes = res.data.cache
    }
    this.currentBankId = this.$store.state.currentBank.bankId
    console.log(this.currentBankId)
    this.initSearchProblems()
  },
  computed: {
    parseProblemType() {
        return function(row) {
          return parseConfig(this.problemTypes, String(row.problemType))
        }
    }
  },
  methods: {
    initSearchProblems() {
        this.current = 1
        this.pageSize = 10
        this.searchProblems()
    },
    async searchProblems() {
        this.queryParams.current = this.current
        this.queryParams.pageSize = this.pageSize
        this.queryParams.bankId = this.currentBankId
        const { data: res } = await showBankInfo(this.queryParams)
        if (res.code === 200) {
            this.problems = res.data.problems.records
            this.total = res.data.problems.total
        }
    },
    currentChangeHandle(current) {
      this.current = current
      this.searchProblems()
    },
    preHandle(current) {
      this.current = current
    },
    nextHandle(current) {
      this.current = current
    },
    async showAnswer(row) {
        const {data: res} = await queryProblemAnswers(row.problemId)
        if (res.code === 200) {
          this.answers = res.data.answers
          this.$store.dispatch('current_answers', JSON.stringify(this.answers))
          this.saveAnswerDialog = true
          this.$refs.answerDetail.refreshAnswers()
        }
    },
    async deleteHandle(row) {
        const {data: res} = await deleteProblem(row.problemId)
        if (res.code === 200) {
            this.$message.success('删除成功')
            this.searchProblems()
        }
    },
    async editHandle(row) {
        this.changeProblem = {...row}
        this.isSaveProblem = false
        this.isSaveAnswer = false
        this.changeProblemKey = true
        this.currentProblemId = this.changeProblem.problemId
        const {data: res} = await queryProblemAnswers(this.changeProblem.problemId)
        if (res.code === 200) {
          this.answers = res.data.answers
          this.$store.dispatch('current_answers', JSON.stringify(this.answers))
          this.$refs.answerDetail.refreshAnswers()
        }
    },
    answerChangeHandle(answers) {
      this.answers = answers
    },
    saveHandle() {
        this.isSaveProblem = true 
        this.isSaveAnswer = true
        this.changeProblemKey = true
        this.changeProblem = {
            problemId: '',
            problemDesc: '',
            problemType: '',
            problemRight: '',
            analysis: '',
            bankId: '',
            bankName: ''
        }
    },
    async changeProblemHandle() {
        this.changeProblem.answers = this.$refs.answerDetail.answers
        if (this.isSaveProblem) {
            const {data: saveRes} = await saveProblem(this.changeProblem)
            if (saveRes.code === 200) {
                this.$message.success('新增成功')
            }
        } else {
            const {data: editRes} = await editProblem(this.changeProblem)
            if (editRes.code === 200) {
                this.$message.success('修改成功')
            }
        }
        this.searchProblems()
        this.changeProblemKey = false
    },
    selectBankHandle(row) {
      this.changeProblem.bankId = row.bankId
      this.changeProblem.bankName = row.bankName
      this.selectBankKey = false
    },
    changeAnswerHandle() {
      this.changeAnswer.sortedId = this.answers.length + 1
      this.answers.push(this.changeAnswer)
      this.saveAnswerDialog = false
    },
    async openChangeAnswerDialog() {
      if (this.isSaveProblem) {
        this.answers = []
        this.$store.dispatch('current_answers', JSON.stringify(this.answers))
      }
      this.saveAnswerDialog = true
      // 修改的时候去查询当前问题的答案
      this.$refs.answerDetail.refreshAnswers()
      
    }
  }
}
</script>

<style lang="css" scoped>
.sec-blue {
  color: #409eff;
}
.sec-title {
  font-size: 18px;
  font-weight: 700;
}
</style>